import React from "react";
import {List,Button} from 'antd-mobile'
import {history} from 'umi'
import {useStoreHook} from "think-react-store";

import './index.less'
import {ErrorBoundary} from "@/components";

export default function (props) {
  const {user: {user, logoutAsync}} = useStoreHook()

  const handleClick = () => {
    history.push({
      pathname: '/user/edit',
      params: {}
    })
  }

  const handleLogout = () => {
    logoutAsync()
  }

  return (
    <ErrorBoundary>
      <div className='user-page'>
        <div className='info'>
          <div className='set' onClick={handleClick}>设置</div>
          <div className='user'>
            <img alt='user' src={user?.userInfo?.avatar || require('../../assets/user.png')}/>
            <div className='tel'>{user?.nickName}</div>
            <div className='sign'>{user?.userName}</div>
          </div>
        </div>
        <div className='lists'>
          <List>
            <List.Item arrow='horizontal' onClick={()=>{history.push('/user/personManage')}}>我的联系人</List.Item>
            <List.Item arrow='horizontal' onClick={()=>{history.push('/user/userDetail')}}>我的主页</List.Item>
            <List.Item arrow='horizontal' onClick={()=>{history.push('/user/follow')}}>我的关注</List.Item>
            <List.Item arrow='horizontal' onClick={()=>{history.push('/user/beFollow')}}>我的粉丝</List.Item>
            <List.Item arrow='horizontal' onClick={()=>{history.push('/user/lease')}}>我的租约</List.Item>
            <List.Item arrow='horizontal' onClick={()=>{history.push('/user/myReply')}}>我的回复</List.Item>
          </List>
        </div>
        <Button onClick={handleLogout} type='warning'>退出登录</Button>
      </div>
    </ErrorBoundary>
  )
}
